<script setup lang="ts">
import { SwapOutlined } from '@ant-design/icons-vue'
import { useI18n } from '@/locales/useI18n'
import { BasicTableColumn } from '../../typing'

const { t } = useI18n()
const emit = defineEmits(['confrim', 'reset'])

defineProps({
  columns: { type: Array<BasicTableColumn>, required: true },
  iconSize: { type: Number, default: 20 }
})

const handleSettingPopoverChange = () => {}

const onReset = () => {
  emit('reset')
}
</script>

<template>
  <a-tooltip>
    <template #title> {{ t('component.table.settingColumn') }} </template>
    <a-popover
      trigger="click"
      placement="bottomRight"
      overlayClassName="system-basic-column-setting__cloumn-list"
      :get-popup-container="(node: any) => node.parentNode"
      @visible-change="handleSettingPopoverChange"
    >
      <div class="system-sort-outlined">
        <swap-outlined :rotate="90" :style="{ fontSize: iconSize + 'px' }" />
      </div>
      <template #title>
        <a-button type="primary">{{ t('common.confirmText') }}</a-button>
        <a type="link" class="columns-reset-btn" @click="onReset">{{
          t('common.resetText')
        }}</a>
      </template>
      <template #content>
        <a-row>
          <a-col :span="20" v-for="item in columns" :key="item.dataIndex">
            {{ item.title }}
          </a-col>
          <a-col :span="4">
            <caret-up-outlined />
            <caret-down-outlined />
          </a-col>
        </a-row>
      </template>
    </a-popover>
  </a-tooltip>
</template>

<style lang="less" scoped>
#sortable {
  .ant-col {
    height: 30px;
  }

  .table-column-drag-icon {
    cursor: move;
    margin-right: 10px;
  }
}
</style>